
import './style/index.css'
import router from "./router";
// 该变量 存储 被渲染完的 组件
let renderedComponent = null;

render(); // 页面刷新的时候，执行一次 render，作用：根据 path 进行 Page 的渲染

// 路由改变时，根据匹配到的组件；渲染 `router-view`
window.onhashchange = render;

async function render() {
  // 监听到了 路由 - route； 的 path 的改变
  const currentPath = location.hash.slice(1);

  // 初始登录，自动跳转至 '/' -> 根路由
  if (currentPath === "") {
    router.push("/");
  }

  const routerView = document.querySelector(".router-view");

  // 根据 currentPath 获取 当前路由
  const currentRoute = router.routes.find((route) => {
    return route.path === currentPath;
  });

  // 根据 当前路由 获取 当前组件
  let currentComponent = currentRoute?.component;

  // 异步组件的加载（懒加载）
  if (typeof currentComponent === "function") {
    const res = await currentComponent();
    currentComponent = res.default;
  }

  const template = currentComponent?.template;
  // 当 获取不到 组件； 或组件中 没有 `template` 时，显示 404
  if (!template) {
    routerView.innerHTML = `<h1>404</h1>`;
    // 只要 页面 不存在，则 不需要执行 后续代码
    return;
  }

  // 将当前组件的 template 渲染至 router-view 中
  routerView.innerHTML = template;
  // 执行完这句话，即表示 当前组件已被渲染完毕
  // 执行完 上述代码，表示 页面渲染完 DOM 元素

  // 页面渲染完毕，要执行 `mounted` 这个钩子函数
  currentComponent?.mounted?.();

  // renderedComponent 中现存储的 已被销毁的组件
  // 已被销毁的组件 若有 destroyed 的钩子函数；则执行该钩子函数
  renderedComponent?.destroyed?.();

  // renderedComponent 存储 已经被渲染完毕后的 组件
  renderedComponent = currentComponent;
}
